<template>
    <swipe class="s" :autoplay="3000" @change="onChange">
      <swipe-item v-for="(item, index) in swiperImages" :key="index">
        <img :src="item" @load="imgLoaded" />
      </swipe-item>
      <template #indicator>
      <div class="custom-indicator">
        <span class="cur">{{ current + 1 }}</span> / <span class="count">{{swiperImages.length}}</span>
      </div>
    </template>
    </swipe>
</template>

<script scoped>
import { Swipe, SwipeItem } from 'vant';
export default {
  name: 'DetailSwiper',
  props: {
    swiperImages: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      isLoaded: false,
      current: 0

    }
  },
  components: {
    Swipe,
    SwipeItem
  },
  methods: {
     onChange(index) {
      this.current = index;
    },
    imgLoaded() {
      console.log('imgloaed===========');

      this.$emit('imgLoaded')
    }
  }
}
</script>

<style lang='less' scoped>
.s {
  img {
    width: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: .2rem;
    bottom: .2rem;
    padding: 8px 15px;
    font-size: .36rem;
    font-weight: bold;
    background: rgba(223, 219, 219,.5);
    border-radius: 15%;
    .cur {
      color: #fff;
    }
  }
}

</style>
